<template>
  <div>
    <div>
      <div class="bg title">资料信息</div>
      <div class="bg fl">
        <div class="small-title">用户名</div>
        <div class="data">{{userinfo.username}}</div>
      </div>
      <div class="bg fl">
        <div class="flex" @click="showClick">
          <div class="small-title">昵称</div>
          <div class="data">{{userinfo.user_nickname}}</div>
        </div>
        <span></span>
      </div>
      <div class="bg fl">
        <div class="flex">
          <div class="small-title">头像</div>
          <form action="/index.php/index/user_icon_apply" method="post" id="form_icon" enctype="multipart/form-data">
            <input class="file" type="file" name="file" id="file" @change="update">
          </form>
          <div class="img">
            <div v-if="userinfo.user_icon">
              <img :src="userinfo.user_icon" alt="">
            </div>
            <div v-else>
              <img src="../../../../assets/img/my/bt_head_color.png" alt="">
            </div>
          </div>
        </div>
        <span></span>
      </div>
    </div>
    
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  data() {
    return {

    }
  },
  props: {
    userinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    showClick() {
      this.$emit('show-click')
    },
    update(e) {
      // $('#form_icon').submit()
      // let file = e.target.files[0]
      // let formData = new FormData()
      // formData.append("upload_user_icon", file)
      // let url = '/user_icon_apply'
      // axios({
      //   url: url,
      //   data: formData,
      //   method: 'post',
      //   headers: {
      //     "Content-Type": "multipart/form-data"
      //   },
      //   withCredentials:true,
      // }).then(res => {
      //   if(res.status == 'err') {
      //     Toast(res.info)
      //   }else {
      //     getMyInfo().then(res => {
      //       this.$store.commit('setuserinfo',res.userinfo)
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.bg {
  box-sizing: border-box;
  padding: 0 .466667rem;
  display: flex;
  align-items: center;
  width: 10rem;
  height: 1.333333rem;
  background: #ffffff;
  border: .013333rem solid #F4F4F4;
}

.bg span {
  width: .32rem;
  height: .32rem;
  background: url('../../../../assets/img/my/bt_right.png') no-repeat;
  background-size: 100%;
}

.title {
  font-size: .426667rem;
  font-weight: 800;
  color: #222222;
}

.small-title {
  font-size: .346667rem;
  font-weight: 700;
  color: #333333;
}

.data {
  font-size: .346667rem;
  font-weight: 400;
  color: #999999;
}

.fl {
  justify-content: space-between;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 8.666667rem;
  position: relative;
}

.img {
  width: .88rem;
  height: .88rem;
  border-radius: 50%;
  overflow: hidden;
}

.img img {
  display: block;
  width: 100%;
  height: 100%;
}

.file {
  position: absolute;
  width: .88rem;
  height: .88rem;
  opacity: 0;
  border-radius: 50%;
  top: 0;
  right: 0;
}

</style>